<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>分页控件测试</title>
    <link href="../../dist/sdpagination.min.css" rel="stylesheet" />
</head>
<body>
<form id="searchForm">
    <!-- 这个form里通常是放查询用的条件，这里用来存储PageSize(如果为固定值，则没必要用它)和PageIndex -->
    <input type="text" name="PageSize" id="PageSize" value="10" />
    <input type="text" name="PageIndex" id="PageIndex" value="1" />
</form>
<br />
<h4>最简洁，传入基本参数，其他都使用默认参数</h4>
<div id="PagerContainer1"></div>
<br />
<h4>传入基本参数，启用PageSize下拉框及其回调，其他都使用默认参数</h4>
<div id="PagerContainer2"></div>
<br />
<h4>设置前一页、下一页、首页、末页按钮的字符、当前页前后按钮数、信息显示的模板、设置PageSize下拉框里的可选项</h4>
<div id="PagerContainer3"></div>
<br />
<h4>设置样式 Large</h4>
<div id="PagerContainer4"></div>
<br />
<h4>设置样式 small</h4>
<div id="PagerContainer5"></div>
<br />
<h4>显示首页、末页、上一页、下一页、快速跳转输入框</h4>
<div id="PagerContainer7"></div>
<br />
<h4>加载皮肤</h4>
<div id="PagerContainer8"></div>
<div id="PagerContainer9"></div>
<div id="PagerContainer10"></div>
<div id="PagerContainer11"></div>
<br />
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="http://apps.bdimg.com/libs/jquery/1.11.3/jquery.js" ></script>
<script src="../../dist/jquery-sdpagination.min.js"></script>
<script>
    $(function () {
        Init();
    });
    function Init() {
        //下面的3个值理论上应该从服务获取更新
        var PageIndex=parseInt($("#PageIndex").val());
        var PageSize=parseInt($("#PageSize").val());
        var TotalCount=65535;

        $("#PagerContainer1").sdpagination({
            totalCount: TotalCount,           //总条数
            pageSize: PageSize,                //每页显示
            pageIndex: PageIndex,                //当前页数
            onPageIndexChange: function (pageIndex, pageSize) { //回调，点击按钮时或者输入页数时，激发onPageIndexChange事件，回调参数为 新页数、PageSize
                //页数变化了，该干点啥，
                $("#PageIndex").val(pageIndex);
                //$("#searchForm").submit();
                Init();
            }
        });
        $("#PagerContainer2").sdpagination({
            totalCount: TotalCount,           //总条数
            pageSize: PageSize,                //每页显示
            pageIndex: PageIndex,                //当前页数
            onPageIndexChange: function (pageIndex, pageSize) { //回调，点击按钮时或者输入页数时，激发onPageIndexChange事件，回调参数为 新页数、PageSize
                //页数变化了，该干点啥，
                $("#PageIndex").val(pageIndex);
                //$("#searchForm").submit();
                Init();
            },
            onPageSizeChange: function (pageSize) {         //回调，当在PageSize下拉框里选择时，onPageSizeChange，回调参数为 新PageSize
                //pageSize变化了，该干点啥，                //注意，分页信息里要显示PageSize的值，同时设置了onPageSizeChange回调时，才会出现PageSize下拉框
                $("#PageIndex").val(1);
                $("#PageSize").val(pageSize);
                //$("#searchForm").submit();
                Init();
            }
        });

        $("#PagerContainer3").sdpagination({
            boxClass:'sdpagination',
            totalCount: TotalCount,           //总条数
            pageSize: PageSize,                //每页显示
            pageIndex: PageIndex,                //当前页数
            preText: '上页',                                  //上一页按钮显示的字符
            nextText: '下页',                                 //下一页按钮显示的字符
            firstText: '首页',                                //首页按钮显示的字符
            lastText: '末页',                                 //末页按钮显示的字符
            showNearby: 3,                                    //当前按钮前后按钮数
            infoTemplet: '每页{pageSize} 共{totalCount} 当前{pageIndex}/{pageCount}',//自定义信息模板
            pageList: [5, 10, 20],                            //设置PageSize下拉框的选择项，
            onPageIndexChange: function (pageIndex, pageSize) { //回调，点击按钮时或者输入页数时，激发onPageIndexChange事件，回调参数为 新页数、PageSize
                //页数变化了，该干点啥，
                $("#PageIndex").val(pageIndex);
                //$("#searchForm").submit();
                Init();
            },
            onPageSizeChange: function (pageSize) {         //回调，当在PageSize下拉框里选择时，onPageSizeChange，回调参数为 新PageSize
                //pageSize变化了，该干点啥，                //注意，分页信息里要显示PageSize的值，同时设置了onPageSizeChange回调时，才会出现PageSize下拉框
                $("#PageIndex").val(1);
                $("#PageSize").val(pageSize);
                //$("#searchForm").submit();
                Init();
            }
        });
        $("#PagerContainer4").sdpagination({
            boxClass: "sdpagination sdpagination-large",
            totalCount: TotalCount,           //总条数
            pageSize: PageSize,                //每页显示
            pageIndex: PageIndex,                //当前页数
            onPageIndexChange: function (pageIndex) {
                //页数变化了，该干点啥，
                $("#PageIndex").val(pageIndex);
                //$("#searchForm").submit();
                Init();
            }
        });
        $("#PagerContainer5").sdpagination({
            boxClass: "sdpagination sdpagination-small",
            totalCount: TotalCount,           //总条数
            pageSize: PageSize,                //每页显示
            pageIndex: PageIndex,                //当前页数
            onPageIndexChange: function (pageIndex) {
                //页数变化了，该干点啥，
                $("#PageIndex").val(pageIndex);
                //$("#searchForm").submit();
                Init();
            }
        });
        $("#PagerContainer7").sdpagination({
            totalCount: TotalCount,            //总条数
            pageSize: PageSize,                //每页显示
            pageIndex: PageIndex,              //当前页数
            showFirstLast: true,              //是否显示首页末页按钮,如果不显示，将始终显示数字1和总页数按钮
            showPreNext: true,                 //是否显示上一页下一页按钮
            showGoInput: true,                 //是否显示快速跳转输入框
            loop:false,                         //不循环
            onPageIndexChange: function (pageIndex, pageSize) { //回调，点击按钮时或者输入页数时，激发onPageIndexChange事件，回调参数为 新页数、PageSize
                //页数变化了，该干点啥，
                $("#PageIndex").val(pageIndex);
                //$("#searchForm").submit();
                Init();
            },
            onPageIndexOutOfRange: function () {
                //
                alert('PageIndex out of range');
            }

        });
        $("#PagerContainer8").sdpagination({
            boxClass: "sdpagination sdpagination-blue",
            totalCount: TotalCount,           //总条数
            pageSize: PageSize,                //每页显示
            pageIndex: PageIndex,                //当前页数
            onPageIndexChange: function (pageIndex, pageSize) { //回调，点击按钮时或者输入页数时，激发onPageIndexChange事件，回调参数为 新页数、PageSize
                //页数变化了，该干点啥，
                $("#PageIndex").val(pageIndex);
                //$("#searchForm").submit();
                Init();
            }
        });
        $("#PagerContainer9").sdpagination({
            boxClass: "sdpagination sdpagination-green",
            totalCount: TotalCount,           //总条数
            pageSize: PageSize,                //每页显示
            pageIndex: PageIndex,                //当前页数
            onPageIndexChange: function (pageIndex, pageSize) { //回调，点击按钮时或者输入页数时，激发onPageIndexChange事件，回调参数为 新页数、PageSize
                //页数变化了，该干点啥，
                $("#PageIndex").val(pageIndex);
                //$("#searchForm").submit();
                Init();
            }
        });
        $("#PagerContainer10").sdpagination({
            boxClass: "sdpagination sdpagination-orange",
            totalCount: TotalCount,           //总条数
            pageSize: PageSize,                //每页显示
            pageIndex: PageIndex,                //当前页数
            onPageIndexChange: function (pageIndex, pageSize) { //回调，点击按钮时或者输入页数时，激发onPageIndexChange事件，回调参数为 新页数、PageSize
                //页数变化了，该干点啥，
                $("#PageIndex").val(pageIndex);
                //$("#searchForm").submit();
                Init();
            }
        });
        $("#PagerContainer11").sdpagination({
            boxClass: "sdpagination sdpagination-red sdpagination-large",
            totalCount: TotalCount,           //总条数
            pageSize: PageSize,                //每页显示
            pageIndex: PageIndex,                //当前页数
            onPageIndexChange: function (pageIndex, pageSize) { //回调，点击按钮时或者输入页数时，激发onPageIndexChange事件，回调参数为 新页数、PageSize
                //页数变化了，该干点啥，
                $("#PageIndex").val(pageIndex);
                //$("#searchForm").submit();
                Init();
            }
        });
    }

</script>
</body>
</html>